<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page import="com.ws.q1.conifg.Res"%>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>六月旅行网</title>
    <!-- Bootstrap -->
    <link href="${pageContext.request.contextPath}/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/common.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/index.css">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="${pageContext.request.contextPath}/js/html5shiv.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/respond.min.js"></script>

    <![endif]-->
    <style>

        .carousel-inner img {
            width: 100%;
            height: auto; /* 保持图片比例 */
        }



        .topbar{position:relative}
        .hottel,.haslogin{position:absolute;top:12px;right:50px}
        .hottel p{cursor:pointer;font-weight:700;float:left;width:100px;border:1px solid orange;text-align:center;height:45px;line-height:45px;margin-right:10px}
        .hottel a{color:#666;text-decoration:none}
        .haslogin{top:45px;right:0}
        .haslogin p{font-weight:700;float:left;margin-right:30px;font-size:18px}

        /* 友情链接样式 */
        .company ul {
            list-style-type: none;
            padding: 0;
            margin: 0;
            white-space: nowrap; /* 防止换行 */
        }
        .company ul li {
            display: inline-block; /* 水平排列 */
            margin-right: 15px; /* 链接之间的间距 */
        }
        .company ul li a {
            font-size: 18px; /* 放大字体 */
            color: #843534; /* 链接颜色 */
            text-decoration: none; /* 去掉下划线 */
        }
        .company ul li a:hover {
            text-decoration: underline; /* 鼠标悬停时显示下划线 */
        }
        .company p {
            font-size: 18px; /* 放大字体 */
            font-weight: 700; /* 加粗字体 */
            display: inline-block; /* 水平排列 */
            margin-right: 10px; /* 文字和链接之间的间距 */
        }

        #main-carousel {
            height: 400px; /* 设置轮播区域高度 */
            overflow: hidden; /* 隐藏溢出部分 */
        }

        /* 统一图片尺寸 */
        #main-carousel .carousel-inner img {
            width: 100%; /* 宽度100%填充容器 */
            height: 100%; /* 高度100%填充容器 */
            /*object-fit: cover; !* 保持比例并裁剪多余部分 *!*/
        }

        /* 调整轮播项高度 */
        #main-carousel .item {
            height: 400px; /* 和轮播容器高度一致 */
        }

        /* 六月精选图片统一尺寸 */
        .jx-item-img {
            width: 100%; /* 占满父容器宽度（col-md-3 的宽度是 25%，此处会自动适配） */
            height: 200px; /* 固定高度，可根据需求调整 */
            object-fit: cover; /* 保持图片比例，裁剪多余部分 */
            display: block; /* 去除图片底部空白间隙 */
        }





    </style>

</head>
<body>
<!--引入头部-->
<!-- 头部 start -->
<header id="header">
    <div class="header_wrap">
        <div class="topbar">
            <div class="logo">
                <a href="/"><img src="${pageContext.request.contextPath}/images/liu.jpg" style="height: 60px;" alt=""></a>
            </div>
            <div class="search">
                <input name="" type="text" placeholder="请输入路线名称" class="search_input" autocomplete="off">
                <a href="${pageContext.request.contextPath}/qiantai/routelist" class="search-button">搜索</a>
            </div>

            <div class="haslogin">
                <c:if test="${empty sessionScope.user}">
                    <p>登录方式：<a href="${pageContext.request.contextPath}/qiantai/login" id="loginLink">登录</a></p>
                </c:if>
                <c:if test="${not empty sessionScope.user}">
                    <p><a href="${pageContext.request.contextPath}/qiantai/login" id="logoutLink">退出登录</a></p>
                    <p><a href="${pageContext.request.contextPath}/qiantai/gerenxinxi">个人信息</a></p>
                </c:if>
            </div>
        </div>
    </div>
</header>
<!-- 首页栏目 -->
<div class="navitem">
    <ul class="nav">
        <li class="nav-active"><a href="${pageContext.request.contextPath}index.jsp">首页</a></li>
        <c:forEach items="${list1}" var="lm">
            <li><a href="${pageContext.request.contextPath}/qiantai/routedetail?id=${lm.lid}">${lm.name}</a></li>
        </c:forEach>
    </ul>
</div>
<!-- banner start-->
<section id="banner">
    <div id="main-carousel" class="carousel slide" data-ride="carousel" data-interval="5000">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <c:forEach items="${lun}" var="lunbo" varStatus="status">
                <li data-target="#main-carousel" data-slide-to="${status.index}" class="${status.first ? 'active' : ''}"></li>
            </c:forEach>
        </ol>
        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            <c:forEach items="${lun}" var="lunbo" varStatus="status">
                <div class="item ${status.first ? 'active' : ''}">
                    <img src="${Res.fileUrl}${lunbo.tou}" alt="">
                </div>
            </c:forEach>
        </div>
        <!-- Controls -->
        <a class="left carousel-control" href="#main-carousel" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#main-carousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</section>

<!-- banner end-->
<!-- 六月旅游 start-->
<section id="content">
    <!-- 六月精选start-->
    <section class="jx">
        <div class="jx_top">
            <div class="jx_tit">
                <img src="${pageContext.request.contextPath}/images/icon_5.jpg" alt="">
                <span>六月精选</span>
            </div>
        </div>
        <div class="jx_content">
            <!-- Tab panes -->
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="popularityr">
                    <div class="row">
                        <c:forEach items="${xianlu}" var="route">
                            <c:if test="${list1.get(1).lid == route.lid}">
                                <div class="col-md-3">
                                    <a href="${pageContext.request.contextPath}/qiantai/routedetail?id=${route.id}">
                                        <img class="jx-item-img" src="${Res.fileUrl}${route.tou}" alt="${route.name}">
                                        <div class="has_border">
                                            <h3>${route.name}</h3>
                                            <div class="price">网付价<em>￥</em><strong>${route.price}</strong><em>起</em></div>
                                        </div>
                                    </a>
                                </div>
                            </c:if>
                        </c:forEach>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- 六月精选end-->

    <!-- 国内游 start-->
    <section class="jx">
        <div class="jx_top">
            <div class="jx_tit">
                <img src="${pageContext.request.contextPath}/images/icon_6.jpg" alt="">
                <span>国内游</span>
            </div>
        </div>
        <div class="jx_content">
            <!-- Tab panes -->
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="popularity">
                    <div class="row">
                        <c:forEach items="${xianlu}" var="route">
                            <c:if test="${list1.get(0).lid == route.lid}">
                                <div class="col-md-3">
                                    <a href="${pageContext.request.contextPath}/qiantai/routedetail?id=${route.id}">
                                        <img class="jx-item-img" src="${Res.fileUrl}${route.tou}" alt="${route.name}">
                                        <div class="has_border">
                                            <h3>${route.name}</h3>
                                            <div class="price">网付价<em>￥</em><strong>${route.price}</strong><em>起</em></div>
                                        </div>
                                    </a>
                                </div>
                            </c:if>
                        </c:forEach>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- 国内游 end-->
    <!-- 境外游 start-->
    <section class="jx">
        <div class="jx_top">
            <div class="jx_tit">
                <img src="${pageContext.request.contextPath}/images/icon_7.jpg" alt="">
                <span>团队游</span>
            </div>
        </div>
        <div class="jx_content">
            <!-- Tab panes -->
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="popularityt">
                    <div class="row">
                        <c:forEach items="${xianlu}" var="route">
                            <c:if test="${list1.get(2).lid == route.lid}">
                                <div class="col-md-3">
                                    <a href="${pageContext.request.contextPath}/qiantai/routedetail?id=${route.id}">
                                        <img class="jx-item-img" src="${Res.fileUrl}${route.tou}" alt="${route.name}">
                                        <div class="has_border">
                                            <h3>${route.name}</h3>
                                            <div class="price">网付价<em>￥</em><strong>${route.price}</strong><em>起</em></div>
                                        </div>
                                    </a>
                                </div>
                            </c:if>
                        </c:forEach>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- 境外游 end-->
</section>
<!-- 旅游 end-->
<!--导入底部-->
<!-- 尾部 start-->
<footer id="footer">
    <div class="company">
        <ul>
           <p>友情链接:</p>
            <c:forEach items="${you}" var="list">
                <li><a href="${list.url}" target="_blank">${list.name}</a></li>
            </c:forEach>
        </ul>
    </div>
</footer>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="${pageContext.request.contextPath}/js/jquery-3.3.1.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
<!--导入布局js，共享header和footer-->
<script type="text/javascript" src="${pageContext.request.contextPath}/js/include.js"></script>
</body>
</html>